<template>
	<view class="settled pb-150">
		<Navigation backType="back" title="宠医入驻" background="#fff" />
		
		<view class="bg pb-20">
			<view class="f ph-45 pt-20">
				<view class="w-200 f ai-c fd-c mr-20 box" v-for="(item, index) in list" :key="index">
					<image src="../../static/success.png" v-show="index<curt" class="w-48 h-48 success"></image>
					<image src="../../static/now.png" class="w-48 h-48 now" v-show="index == curt"></image>
					<view class="w-48 h-48 f ai-c jc-c" v-show="index>curt">
						<view class="step w-36 h-36 b-36 fs-24 fw-600 text-color3 f ai-c jc-c">{{ index+1 }}</view>
					</view>
					<view class="fs-26 fw-600 mt-16" :class="index == curt ? 'text-color4' : 'text-color10'">{{ item }}</view>
					<view class="heng w-180 h-8" v-show="index !=list.length-1" :class="index>=curt?'bg-heng':''"></view>
				</view>
				<!-- <view class="pt-20 f jc-c ai-c"> 
                    <image src="../../static/now.png" class="w-48 h-48"></image>
                </view>
                <view class="f ai-c jc-c mt-16 ph-45">
                    <view class="fs-26 fw-600 w-150 f jc-c mr-20" v-for="(item, index) in list" :key="index" :class="index == curt ? 'text-color4' : 'text-color10'">{{ item }}</view>
                </view> -->
			</view>
		</view>
		<!-- <Tel ref="tel" v-show="curt == 0" @bn="bnCurt"/> -->
		<info ref="info" v-if="curt == 0" @fn="chanCurt" />
		<Practice ref="practice" v-else-if="curt == 1" @cf="submit" />
		<view v-else-if="curt == 2">
			<view class="box" style='display: flex;
				                align-items: center;
				                flex-direction: column;
				                padding-top: 230rpx;'>
				<u-image src="http://cwht.ricecs.cn/app/gou.png" width="96rpx" height="96rpx"></u-image>
				<view class="title" style='margin-top: 32rpx;
				                        font-size: 36rpx;
				                        font-weight: bold;'>
					提交成功
				</view>
				<!--  <view class="tips">
		                数据提交失败，信息有误，请重新填写和操作
		        </view> -->
				<view class="btn" @click='toHome' style='margin-top: 32rpx;
				                        width: 240rpx;'>
					<u-button type="info" shape="circle">返回登录页</u-button>
				</view>
			</view>
		</view>

	</view>
</template>
<script setup lang="ts">
	// import Tel from './Tel.vue';
	import info from './Info.vue';
	import Practice from './Practice.vue';
	import { doctorCreate } from '@/services/api/index';
	import { ref } from 'vue';
	const curt = ref(0);
	const list = ['基础信息', '执业信息', '入驻审核'];
	const formData = ref({
		name: '',
		identityId: '',
		avatar: '',
		subject: '',
		title: '',
		department: '',
		graduated: '',
		licenseNo: '',
		licenseUrl: '',
		sex: '',
		groupType: 1,
		skillingRemark: '',
		introduction: '',
		labelNames: '',
		mobile: '',
	});
	const bnCurt = (data : any) => {
		curt.value = 1;
		formData.value.mobile = data.mobile;
	}

	const chanCurt = (data : any) => {
		curt.value = 1;
		formData.value.name = data.name;
		formData.value.identityId = data.identityId;
		formData.value.subject = data.subject;
		formData.value.title = data.title;
		formData.value.department = data.department;
		formData.value.graduated = data.graduated;
		formData.value.licenseNo = data.licenseNo;
		formData.value.sex = data.sex;
	}
	const submit = async (cu : number, data : any) => {
		console.log(cu)
		if (cu == 1) {
			curt.value = 0;
			return;
		}
		formData.value.mobile = uni.getStorageSync('tel');
		formData.value.skillingRemark = data.skillingRemark;
		formData.value.introduction = data.introduction;
		formData.value.labelNames = data.labelNames;
		formData.value.licenseUrl = data.licenseUrl;
		formData.value.avatar = data.avatar;
		await doctorCreate(formData.value);
		uni.showToast({
			title: '提交成功',
		});
		curt.value = 2



	}
	

	
	function toHome() {
		uni.redirectTo({
			url: '/pages/login/index'
		})
	}
</script>
<style lang="scss" scoped>
	.settled {
		background: #f5f5f5;
		min-height: 100vh;

		.box {
			position: relative;

			.now {
				position: relative;
				z-index: 1;
			}

			.success {
				position: relative;
				z-index: 1;
			}

			.step {
				background: #f0f0f0;
				position: relative;
				z-index: 1;
			}
		}

		.heng {
			background: #faf4e9;
			position: absolute;
			right: -100rpx;
			top: 20rpx;
		}

		.bg-heng {
			background: #f0f0f0;
		}

		.box:last-child {
			margin-right: 0;
		}

		::v-deep .u-textarea__count {
			background: #f8f8f8 !important;
			color: #cccccc !important;
			font-size: 24rpx !important;
		}

		::v-deep .u-textarea {
			padding: 0;
		}

		::v-deep .u-textarea__field {
			background: #f8f8f8;
			height: 220rpx !important;
		}

		::v-deep .u-button {
			height: 96rpx !important;
		}

		::v-deep .u-button__text {
			font-size: 32rpx !important;
			font-weight: 600 !important;
		}

		::v-deep .u-radio {
			margin-right: 40rpx !important;
		}

		::v-deep .u-form-item__body {
			padding: 32rpx 0 !important;
		}

		::v-deep .u-form-item__body__left__content {
			padding-right: 40rpx !important;
		}

		::v-deep .u-upload__wrap__preview {
			margin: 0 10rpx 10rpx 0 !important;
		}

		::v-deep .u-upload__wrap__preview:nth-child(4n) {
			margin: 0 0 10rpx 0 !important;
		}

		.bg {
			background: #fff;
		}
	}
</style>